<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Notification</title>
    <!--&lt;!&ndash; 请勿在项目正式环境中引用该 layui.css 地址 &ndash;&gt;-->
    <!--<link href="//unpkg.com/layui@2.8.16/dist/css/layui.css" rel="stylesheet">-->
    <!--<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
    <!--&lt;!&ndash; 请勿在项目正式环境中引用该 layui.js 地址 &ndash;&gt;-->
    <!--<script src="//unpkg.com/layui@2.8.16/dist/layui.js"></script>-->
    <style>
        /* Notification container */
        .notification {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 300px;
            padding: 15px;
            background-color: #f1f1f1;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            display: none;
        }

        /* Notification content */
        .notification-content {
            font-size: 16px;
        }

        /* Close button */
        .close-btn {
            float: right;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>

<body>
<div class="notification" id="notification">
    <span class="close-btn" onclick="closeNotification()">&times;</span>
    <div class="notification-content" id="notificationContent">
        This is a notification message.
    </div>
</div>
<h1>WebSocket Notification Example</h1>
<button id="connectBtn">Connect</button>
<a href=websocket/page1.html>跳转page1</a>
<div id="notificationArea"></div>

<script>

    function showNotification(message) {
        let notification = document.getElementById('notification');
        let notificationContent = document.getElementById('notificationContent');

        notificationContent.innerText = message;
        notification.style.display = 'block';

        setTimeout(function () {
            notification.style.display = 'none';
        }, 5000); // Hide after 5 seconds
    }

    function closeNotification() {
        let notification = document.getElementById('notification');
        notification.style.display = 'none';
    }

    $(document).ready(function () {
        let ws;

        $('#connectBtn').click(function () {
            // if (!ws) {
            if (false) {
                ws = new WebSocket('ws://localhost:8099?accessToken=4444');

                ws.onopen = function () {
                    console.log('WebSocket connection established1.');
                };

                ws.onmessage = function (event) {
                    let notificationArea = $('#notificationArea');
                    notificationArea.text('New notification: ' + event.data);
                    notificationArea.addClass('notification');
                    // showNotification(event.data)
                    // Play a sound or show an alert to get user's attention
                    // Example: Play a notification sound
                    layui.layer.open({
                        type: 1,
                        title: '会议通知',
                        offset: 'rb' || ['200px', '280px'], // 详细可参考 offset 属性
                        id: 'ID-demo-layer-offset-', // 防止重复弹出
                        content: `<div style="padding: 16px;">您有一条新消息！！！</div>`,
                        area: '240px',
                        anim: 6,
                        time: 3000,
                        btn: '关闭全部',
                        btnAlign: 'c', // 按钮居中
                        shade: 0, // 不显示遮罩
                        yes: function(index, layero, that){
                            console.log(layer)
                            layer.close(index); // 关闭弹层
                        }
                    });
                    let audio = new Audio('mp3/response.mp3')
                    // let audio = new Audio('https://img.tukuppt.com/newpreview_music/09/00/61/5c893a979fa3d45681.mp3')
                    audio.play()
                    // setTimeout(() => {
                    //     audio.pause()
                    // }, 3000)


                };

                ws.onclose = function () {
                    console.log('WebSocket connection closed.');
                };
            }
            websocket.connect({
                url: 'ws://localhost:8099?accessToken=4444',
                onopen: function () {
                    console.log('ws open!')
                },
                onmessage: function (event) {
                    console.log(event)
                    notification.audio.play();	//播放提醒声音 - 叮咚
                }
            })
        });
    });
</script>

<style>
    .notification {
        background-color: yellow;
        padding: 10px;
        margin-top: 10px;
    }
</style>
</body>

</html>